<template>
   <div class="activity-like views-container">
       <share-link :config="shareLinkConfig" ref="sharelink">
      <template slot="title">-点赞</template>
      <template slot="el-form-item">
        <el-form-item label="小程序路径" v-if="shareLinkConfig.params.qrUrl">
          <el-input style="width: 270px;" readonly placeholder="请输入内容" v-model="shareLinkConfig.params.qrUrl" class="input-with-select">
            <el-button slot="append" @click="handleClipboard(shareLinkConfig.params.qrUrl,$event)">复制</el-button>
          </el-input>
        </el-form-item>
        <el-form-item label="公众号链接" v-if="shareLinkConfig.params.linkUrl">
          <el-input style="width: 270px;" readonly placeholder="请输入内容" v-model="shareLinkConfig.params.linkUrl" class="input-with-select">
            <el-button slot="append" @click="handleClipboard(shareLinkConfig.params.linkUrl,$event)">复制</el-button>
          </el-input>
        </el-form-item>
         <el-form-item label="短链接" v-if="shareLinkConfig.params.weChat_short_url">
          <el-input style="width: 270px;" readonly placeholder="请输入内容" v-model="shareLinkConfig.params.weChat_short_url" class="input-with-select">
            <el-button slot="append" @click="handleClipboard(shareLinkConfig.params.weChat_short_url,$event)">复制</el-button>
          </el-input>
        </el-form-item>
      </template>
        </share-link>
       <div class="wlm-table"> 
           <div class="wlm-table-hearder-btn">
                <!-- <router-link tag="span" :to="{path:'/application/addActivity'}">
                    <el-button size="small" type="primary">添加活动</el-button>
                </router-link> -->
                <router-link tag="span" to="/application/addActivity">
                <el-button size="small" type="primary">添加活动</el-button>
            </router-link>
            </div>
            <div class="wlm-table-header">
                <el-form :model="tableFormatData.activityLike.files" size="small" label-width="85px" class="retail-form" label-position="right">
                    <el-form-item label="" class="filter">
                        <el-form-item label="活动名称：">
                            <el-input @keyup.enter.native="filesSerch" v-model="tableFormatData.activityLike.files.title" placeholder="请输入活动名称" style="width:160px;"></el-input>
                        </el-form-item>
                        <el-form-item label="活动时间：">
                            <el-date-picker v-model="tableFormatData.activityLike.files.time" value-format="timestamp" type="datetimerange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" :default-time="['00:00:00', '23:59:59']">
                            </el-date-picker>
                        </el-form-item>
                    </el-form-item>
                    <el-form-item label="" class="filter-btns">
                        <el-button type="primary" @click="filesSerch">筛选</el-button>
                        <el-button type="text" @click="filesEmpty">清空筛选条件</el-button>
                    </el-form-item>
                </el-form>
            </div>
            <div class="wlm-table-content">
                <el-tabs v-model="tableFormatData.activityLike.files.status" type="card" @tab-click="filesSerch">
                    <el-tab-pane label="全部活动" name="0"></el-tab-pane>
                    <el-tab-pane label="未开始" name="2"></el-tab-pane>
                    <el-tab-pane label="进行中" name="1"></el-tab-pane>
                    <el-tab-pane label="已结束" name="3"></el-tab-pane>
                </el-tabs>
                <el-table :ref="tableFormatData.activityLike.key" :data="tableFormatData.activityLike.tableData" @selection-change="handleSelectionChange" style="width: 100%">
                    <el-table-column prop="date" label="活动标题" min-width="60">
                        <template slot-scope="scope">
                            <span>{{scope.row.title}}</span>
                        </template>
                    </el-table-column>
                    <el-table-column prop="date" label="活动时间" min-width="100">
                        <template slot-scope="scope">
                            <p style="white-space: nowrap;">开始时间:{{scope.row.start_time | parseTime('{y}-{m}-{d} {h}:{i}:{s}')}}</p>
                            <p style="white-space: nowrap;">结束时间:{{scope.row.end_time | parseTime('{y}-{m}-{d} {h}:{i}:{s}')}}</p>
                        </template> 
                    </el-table-column>
                    <el-table-column prop="name" label="活动状态" min-width="60">
                        <template slot-scope="scope">
                            <span v-if="scope.row.status==1">进行中</span>
                            <span v-if="scope.row.status==2">未开始</span>
                            <span v-if="scope.row.status==3">已结束</span>
                        </template>
                    </el-table-column>
                     <el-table-column prop="date" label="用户群体" min-width="60">
                        <template slot-scope="scope">
                            <span v-if="scope.row.user_group==1">所有用户</span>
                            <span v-if="scope.row.user_group==2">会员用户</span>
                            <span v-if="scope.row.user_group==3">分销用户</span>
                            <span v-if="scope.row.user_group==4">新用户</span>
                            <span v-if="scope.row.user_group==5">限定地区用户{{scope.row.address}}</span>
                            <span v-if="scope.row.user_group==6">标签用户</span>
                        </template>
                    </el-table-column>
                    <el-table-column prop="date" label="参与人数" min-width="60">
                        <template slot-scope="scope">
                            <span>{{scope.row.enjoy_user}}人</span>
                        </template>
                    </el-table-column>
                    <el-table-column prop="date" label="点赞未参与人数" min-width="60">
                        <template slot-scope="scope">
                            <span>{{scope.row.no_enjoy_user}}</span>
                        </template>
                    </el-table-column>
                    <el-table-column prop="date" label="客服/社群" min-width="60">
                        <template slot-scope="scope">
                            <span>{{scope.row.community_name}}</span>
                        </template>
                    </el-table-column>
                    <el-table-column prop="date" label="奖品模式" min-width="60">
                        <template slot-scope="scope">
                            <span v-if="scope.row.type == 1">名次模式</span>
                            <span v-if="scope.row.type == 2">点赞数模式</span>
                        </template>
                    </el-table-column>
                    <el-table-column prop="date" label="操作" min-width="100">
                        <template slot-scope="scope">
                            <div class="operation-group">
                                <router-link class="wlm-text" tag="span" :to="{path:'/application/lookUser',query :{ praise_id:scope.row.praise_id,state:scope.row.status}}">
                                    <el-button type="text">查看用户</el-button>
                                </router-link>
                                <div class="btn-line"></div>
                               <el-button class="wlm-text" type="text" @click="sharelink(scope.row.praise_id)">推广</el-button>
                                <div class="btn-line"></div>
                                <router-link class="wlm-text" tag="span" :to="{path:'/application/addActivity', query:{praise_id:scope.row.praise_id,status:scope.row.status}}">
                                        <el-button type="text">编辑</el-button>
                                </router-link>
                                <!-- <el-button class="wlm-text" type="text">编辑</el-button> -->
                                
                                <div class="btn-line"></div>
                                <el-button class="wlm-text" type="text" @click="delTableItem(scope.row.praise_id)">删除</el-button>
                            </div>
                        </template>
                    </el-table-column>
                </el-table>
                <div class="pagination-content flex-row flex-justify-e flex-align-c">
                    <el-pagination :disabled="!hasTableData" @size-change="listPageChange" @current-change="listPageChange" :current-page.sync="tableFormatData.activityLike.pagination.page" :page-sizes="tableFormatData.activityLike.pagination.pagesizes" :page-size.sync="tableFormatData.activityLike.pagination.list_rows" layout="total, sizes, prev, pager, next, jumper" :total="hasTableData?tableFormatData.activityLike.pagination.total : 0">
                    </el-pagination>
                </div>
            </div>
       </div>
   </div>
</template>

<script>
import {
    praiseLists,praiseSpread,praiseDel
} from '@/api/operation'
import clipboard from '@/utils/clipboard'
import ShareLink from '@/components/ShareLink/index'
    import mixins from '@/mixins/mixins'
    export default {
      mixins: [mixins.getters('Table')],
      name:'activityLike',
      components:{
        ShareLink
      },
      created() {},
      data() {
          return {
              shareLinkConfig: {
                current: 'weChatQr',
                params: {
                    weChat_short_url:'',
                    qrUrl: '',
                    linkUrl: '',
                    weChatQr: '',
                    appQr: ''
                }
            },
            tableFormatData: {
                current: 'activityLike',
                activityLike: {
                    key: 'activityLike',
                    api: {
                        getList:praiseLists,
                         delList: praiseDel
                    },
                    tableData: [],
                    files: {
                        ids: [],
                        checkall: '0',
                        Recycle: '1'
                    },
                      pagination: {
                        page: 1,
                        list_rows: 10,
                        pagesizes: [10, 20, 50],
                        total: 0
                    }
                }
            },
        }
      },
      methods: {
        //   推广
         sharelink(praise_id) {
            praiseSpread({ praise_id }).then((response) => {
                const { data: { data: { weChat_qrcode, wxApp_qrcode, weChat_url, wxApp_url, url,weChat_short_url } } } = response
                this.shareLinkConfig.params.qrUrl = wxApp_url
                this.shareLinkConfig.params.linkUrl = weChat_url
                this.shareLinkConfig.params.weChatQr = weChat_qrcode
                this.shareLinkConfig.params.appQr = wxApp_qrcode
                this.shareLinkConfig.params.url = url
                this.shareLinkConfig.params.weChat_short_url = weChat_short_url
                this.shareLinkConfig.current = weChat_qrcode ? 'weChatQr' : weChat_qrcode ? 'appQr' : ''
            })
            this.$refs.sharelink.toggle()
            },
            handleClipboard(text, event) {
                clipboard(text, event)
                },
            // 删除
        
      },

    }
</script>
<style lang="scss" scoped>

</style>